<template>
	<div class="content">
		<!-- 分页组件 -->
		<el-pagination
			class="tablePagination"
			:current-page="Number(pageable?.pageNum)"
			:page-size="Number(pageable?.pageSize)"
			:page-sizes="pageSizes"
			:background="true"
			size="small"
			:layout="layout"
			:total="pageable.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		></el-pagination>
	</div>
	</template>
	
	<script setup lang="ts" name="pagination">
		interface Pageable {
			[key: string]: string | number;
			total: number;
		}
	
		interface PaginationProps {
			pageable: Pageable;
			layout: String;
			pageSizes: Array<Number>;
			handleSizeChange: (size: number) => void;
			handleCurrentChange: (currentPage: number) => void;
		}
	
		defineProps<PaginationProps>();
		
	</script>
	
	<style scoped>
		.content {
			width: 100%;
			background-color: #fff;
			position: fixed;
		}
		.tablePagination {
			padding: 10px 0; 
			float: right;
			margin-right: 36px;
		}
	</style>